<template>
  <div class="login">
    <div class="login_left">
      <div class="logo">
        <img src="@/assets/img/login-logo.png" />
      </div>
      <div class="welcome">欢迎登录</div>
      <div class="platform">海囤客汽车出口平台</div>
      <div class="copyright">
        <div>
          2021 天津盛世恒丰科技有限公司 版权所有 网站备案/许可证号：
          <span class="pointer" @click="handleOpenPage('https://beian.miit.gov.cn/')">
            津ICP备2021007718号-2
          </span>
        </div>
        <div class="gongan">
          <img src="@/assets/img/gongan.png" />
          <div class="ml-sm">
            津公网安备
            <span class="pointer" @click="handleOpenPage('https://beian.mps.gov.cn/#/query/webSearch')"> 12010202000835号 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="login_right">
      <div class="controls">
        <div class="title">用户登录</div>

        <div class="login_form">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-position="top"
            label-width="auto"
            hide-required-asterisk
            status-icon
          >
            <div class="mt-lg">
              <el-form-item label="登录账号" prop="appId">
                <el-input
                  prefix-icon="el-icon-mobile-phone"
                  placeholder="请输入手机号"
                  size="large"
                  v-model="ruleForm.appId"
                />
              </el-form-item>
              <el-form-item label="账号密码" prop="password">
                <el-input
                  prefix-icon="el-icon-lock"
                  placeholder="请输入密码"
                  size="large"
                  type="password"
                  show-password
                  v-model="ruleForm.password"
                />
              </el-form-item>
            </div>
            <el-form-item>
              <el-button
                :loading="loading"
                size="large"
                class="wh mt-30"
                type="primary"
                @click="handleLogin"
                >登 录</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-checkbox
                v-model="ruleForm.remember"
                label="记住密码"
                size="large"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      loading: false,
      rules: {
        appId: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      ruleForm: {},
    };
  },
  mounted() {
    const account = this.COOKIE.getCookie("ACCOUNT_INFO");

    if (account) {
      this.ruleForm = JSON.parse(atob(account));
    }
  },
  methods: {
    handleOpenPage(url) {
      window.open(url);
    },
    handleLogin() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          const data = JSON.parse(JSON.stringify(this.ruleForm));
          data.methodName = "login";
          data.timestamp = Date.now();
          const url = "/account/login";
          this.$ajax({ method: "post", url, data }).then(
            (res) => {
              this.loading = false;
              if (data.remember) {
                this.COOKIE.setCookie(
                  "ACCOUNT_INFO",
                  btoa(JSON.stringify(data)),
                  7
                );
              } else {
                this.COOKIE.setCookie("ACCOUNT_INFO", btoa("{}"), 7);
              }
              if (res.data.result) {
                localStorage.setItem(
                  "user",
                  JSON.stringify(res.data.result.user)
                );
                sessionStorage.setItem(
                  "user",
                  JSON.stringify(res.data.result.user)
                );
                this.$store.commit("SET_USER", res.data.result.user);
                this.COOKIE.setCookie("authorization", res.data.result.jwt, 1);
                this.COOKIE.setCookie("appId", res.data.result.user.id, 1);
                this.COOKIE.setCookie("Islogin", 1, 1);
                this.$router.push({
                  path: "/home",
                });
              } else {
                this.$message.warning(res.data.resultInfo || "登录失败");
              }
            },
            (err) => {
              this.$message.warning("登录失败");
              this.loading = false;
            }
          );
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__nav) {
  width: 100% !important;
  justify-content: space-around;
}
.login_form {
  margin: 86px 70px 0 70px;
}
.login {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: #051e36;
  background: url("../assets/img/login-bg.png") no-repeat;
  background-size: 100% 100%;
  .login_left {
    width: 35.9375vw;
    height: 100%;
    background: rgba(71, 131, 210, 0.87);
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      margin-top: 155px;
      width: 220px;
      height: 82px;
    }
    .welcome {
      font-weight: 400;
      font-size: 52px;
      font-weight: 400;
      color: #0e2f4e;
      margin-top: 95px;
    }
    .platform {
      margin-top: 30px;
      font-size: 52px;
      font-weight: 500;
      color: #ffffff;
    }
    .copyright {
      font-size: 12px;
      color: #efefef;
      position: absolute;
      bottom: 0;
      left: auto;
      right: auto;
      margin-bottom: 50px;
      .gongan {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
        & > img {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .login_right {
    width: calc(100vw - 35.9375vw);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .controls {
      width: 546px;
      height: 657px;
      background: #ffffff;
      box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
        0px 6px 16px 0px rgba(0, 0, 0, 0.08),
        0px 3px 6px -4px rgba(0, 0, 0, 0.12);
      position: relative;
      //   .controls-bottom {
      //     margin: 0 70px;
      //     position: absolute;
      //     bottom: 40px;
      //     font-size: 14px;
      //     font-weight: 400;
      //     left: 0;
      //     right: 0;
      //   }
      .title {
        font-size: 24px;
        font-weight: 500;
        color: #092036;
        text-align: center;
        margin-top: 50px;
      }
    }
  }
}
</style>